{% extends "admin/base.html" %}

{% block stylesheets %}
	<link rel="stylesheet" href="{{ url_for('views.themes', theme='admin', path='css/challenge-board.css') }}">
    <style type="text/css">
        .challenge-desc img {
            max-width: 100%!important;
        }
    </style>
{% endblock %}

{% block content %}
    {% if en %}
<div class="modal fade" id="challenge-window" role="dialog">
</div>

<div class="modal fade" id="challenge-comments-window" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-action text-center w-100">Comments</h2>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body clearfix">
                <div class="row">
                    <div class="col-md-12">
                        <div id="comment-box">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="jumbotron">
    <div class="container">
        <h1 class="text-center">{{ challenge.name }}</h1>
        <h2 class="text-center">{{ challenge.category }} > {{ challenge.subcategory }}</h2>
        <h2 class="text-center">{{ challenge.type }}</h2>
        {% set badge_state = 'badge-danger' if challenge.state == 'hidden' else 'badge-success' %}
        <h5>
				<span class="badge {{ badge_state }} challenge-state">
					{{ challenge.state }}
				</span>
        </h5>
        <h3 class="text-center">{{ challenge.value }} points</h3>
        <div class="pt-3">
            <a class="preview-challenge no-decoration">
                <i class="btn-fa fas fa-file-alt fa-2x px-2" data-toggle="tooltip" data-placement="top"
                   title="Preview Challenge"></i>
            </a>
            <a class="no-decoration" href="{{ url_for('admin.submissions_listing', submission_type='correct', field='challenge_id', q=challenge.id) }}">
                <i class="btn-fa fas fa-tasks fa-2x px-2" data-toggle="tooltip" data-placement="top"
                   title="Correct Submissions"></i>
            </a>
            <a class="comments-challenge no-decoration">
                <i class="btn-fa fas fa-comments fa-2x px-2" data-toggle="tooltip" data-placement="top"
                   title="Comments"></i>
            </a>
            <a class="delete-challenge no-decoration">
                <i class="btn-fa fas fa-trash-alt fa-2x px-2" data-toggle="tooltip" data-placement="top"
                   title="Delete Challenge"></i>
            </a>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <nav class="nav nav-tabs nav-fill" id="challenge-properties" role="tablist">
                <a class="nav-item nav-link small active" data-toggle="tab" href="#files" role="tab">Files</a>
                <a class="nav-item nav-link small" data-toggle="tab" href="#flags" role="tab">Flags</a>
                <a class="nav-item nav-link small" data-toggle="tab" href="#topics" role="tab">Topics</a>
                <a class="nav-item nav-link small" data-toggle="tab" href="#tags" role="tab">Tags</a>
                <a class="nav-item nav-link small" data-toggle="tab" href="#hints" role="tab">Hints</a>
                <a class="nav-item nav-link small" data-toggle="tab" href="#requirements" role="tab">Requirements</a>
                <a class="nav-item nav-link small" data-toggle="tab" href="#next" role="tab">Next</a>
            </nav>

            <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane fade show active" id="files" role="tabpanel">
                    <div class="row">
                        <div class="col-md-12">
                            <h3 class="text-center py-3 d-block">Files</h3>
                            {% include "admin/modals/challenges/files.html" %}
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="flags" role="tabpanel">
                    <div class="row">
                        <div class="col-md-12">
                            <h3 class="text-center py-3 d-block">Flags</h3>
                            {% include "admin/modals/challenges/flags.html" %}
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="topics" role="tabpanel">
                    <div class="row">
                        <div class="col-md-12">
                            <h3 class="text-center py-3 d-block">Topics</h3>
                            {% include "admin/modals/challenges/topics.html" %}
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="tags" role="tabpanel">
                    <div class="row">
                        <div class="col-md-12">
                            <h3 class="text-center py-3 d-block">Tags</h3>
                            {% include "admin/modals/challenges/tags.html" %}
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="hints" role="tabpanel">
                    <div class="row">
                        <div class="col-md-12">
                            <h3 class="text-center py-3 d-block">Hints</h3>
                            {% include "admin/modals/challenges/hints.html" %}
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="requirements" role="tabpanel">
                    <div class="row">
                        <div class="col-md-12">
                            <h3 class="text-center py-3 d-block">Requirements</h3>
                            {% include "admin/modals/challenges/requirements.html" %}
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="next" role="tabpanel">
                    <div class="row">
                        <div class="col-md-12">
                            <h3 class="text-center py-3 d-block">Next Challenge</h3>
                            {% include "admin/modals/challenges/next.html" %}
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div id="challenge-update-container" class="col-md-6">
            {{ update_template | safe }}
        </div>
    </div>
</div>
    {% else %}
<div class="modal fade" id="challenge-window" role="dialog">
</div>

<div class="modal fade" id="challenge-comments-window" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-action text-center w-100">评论</h2>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body clearfix">
                <div class="row">
                    <div class="col-md-12">
                        <div id="comment-box">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="jumbotron">
    <div class="container">
        <h1 class="text-center">{{ challenge.name }}</h1>
        <h2 class="text-center">{{ challenge.category }} > {{ challenge.subcategory }}</h2>
        <h2 class="text-center">{{ challenge.type }}</h2>
        {% set badge_state = 'badge-danger' if challenge.state == 'hidden' else 'badge-success' %}
        <h5>
				<span class="badge {{ badge_state }} challenge-state">
					{{ challenge.state }}
				</span>
        </h5>
        <h3 class="text-center">{{ challenge.value }} 分值</h3>
        <div class="pt-3">
            <a class="preview-challenge no-decoration">
                <i class="btn-fa fas fa-file-alt fa-2x px-2" data-toggle="tooltip" data-placement="top"
                   title="预览题目"></i>
            </a>
            <a class="no-decoration" href="{{ url_for('admin.submissions_listing', submission_type='correct', field='challenge_id', q=challenge.id) }}">
                <i class="btn-fa fas fa-tasks fa-2x px-2" data-toggle="tooltip" data-placement="top"
                   title="正确提交"></i>
            </a>
            <a class="comments-challenge no-decoration">
                <i class="btn-fa fas fa-comments fa-2x px-2" data-toggle="tooltip" data-placement="top"
                   title="评论"></i>
            </a>
            <a class="delete-challenge no-decoration">
                <i class="btn-fa fas fa-trash-alt fa-2x px-2" data-toggle="tooltip" data-placement="top"
                   title="删除题目"></i>
            </a>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <nav class="nav nav-tabs nav-fill" id="challenge-properties" role="tablist">
                <a class="nav-item nav-link small active" data-toggle="tab" href="#files" role="tab">附件</a>
                <a class="nav-item nav-link small" data-toggle="tab" href="#flags" role="tab">Flags</a>
                <a class="nav-item nav-link small" data-toggle="tab" href="#topics" role="tab">话题</a>
                <a class="nav-item nav-link small" data-toggle="tab" href="#tags" role="tab">标签</a>
                <a class="nav-item nav-link small" data-toggle="tab" href="#hints" role="tab">提示</a>
                <a class="nav-item nav-link small" data-toggle="tab" href="#requirements" role="tab">前置要求</a>
                <a class="nav-item nav-link small" data-toggle="tab" href="#next" role="tab">下一题</a>
            </nav>

            <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane fade show active" id="files" role="tabpanel">
                    <div class="row">
                        <div class="col-md-12">
                            <h3 class="text-center py-3 d-block">文件</h3>
                            {% include "admin/modals/challenges/files.html" %}
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="flags" role="tabpanel">
                    <div class="row">
                        <div class="col-md-12">
                            <h3 class="text-center py-3 d-block">Flags</h3>
                            {% include "admin/modals/challenges/flags.html" %}
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="topics" role="tabpanel">
                    <div class="row">
                        <div class="col-md-12">
                            <h3 class="text-center py-3 d-block">话题</h3>
                            {% include "admin/modals/challenges/topics.html" %}
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="tags" role="tabpanel">
                    <div class="row">
                        <div class="col-md-12">
                            <h3 class="text-center py-3 d-block">标签</h3>
                            {% include "admin/modals/challenges/tags.html" %}
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="hints" role="tabpanel">
                    <div class="row">
                        <div class="col-md-12">
                            <h3 class="text-center py-3 d-block">提示</h3>
                            {% include "admin/modals/challenges/hints.html" %}
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="requirements" role="tabpanel">
                    <div class="row">
                        <div class="col-md-12">
                            <h3 class="text-center py-3 d-block">前置需求</h3>
                            {% include "admin/modals/challenges/requirements.html" %}
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="next" role="tabpanel">
                    <div class="row">
                        <div class="col-md-12">
                            <h3 class="text-center py-3 d-block">下一题</h3>
                            {% include "admin/modals/challenges/next.html" %}
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div id="challenge-update-container" class="col-md-6">
            {{ update_template | safe }}
        </div>
    </div>
</div>
    {% endif %}


{% endblock %}

{% block entrypoint %}
	<script defer src="{{ url_for('views.themes', theme='admin', path='js/pages/challenge.js') }}"></script>
{% endblock %}

{% block scripts %}
	<script>
        var CHALLENGE_ID = {{ challenge.id }};
        var CHALLENGE_NAME = {{ challenge.name | tojson }};
	</script>
	<script defer src="{{ url_for('views.themes', theme='admin', path='js/echarts.bundle.js') }}"></script>
	<script defer src="{{ request.script_root }}{{ update_script }}"></script>
{% endblock %}
